<template>
	<div class="main">
		<div class="main_header" slot="header">
			<img src="https://www.jsu.edu.cn/img/logo.png" style="height: 2.5rem;"/>
			<div style="margin-left: 20px;">
				<el-menu  class="el-menu-demo" mode="horizontal" >
					<el-menu-item index="2" @click="home">首页</el-menu-item>
					<el-menu-item index="9" @click="curricul2">面经分享</el-menu-item>
					<el-menu-item index="3" @click="exercis">专项练习</el-menu-item>
					<el-menu-item index="7" @click="curricul">考试记录</el-menu-item>
					<el-menu-item index="5" @click="ranking">在线考试</el-menu-item>
					<el-menu-item index="4" @click="curricul3">学习中心</el-menu-item>
					<!-- <el-menu-item index="6" @click="curricul1">课程中心</el-menu-item> -->
					
					<!-- <el-menu-item index="8" @click="interview">答题记录</el-menu-item> -->
<!-- 					<el-menu-item index="6" @click="ranking"><h3>学习推荐</h3></el-menu-item>
					<el-menu-item index="8" @click="ranking"><h3>集训队</h3></el-menu-item> -->
				</el-menu>
			</div>
		</div>

		<div slot="header_image">
			<!-- <span style="text-align: center;">刘彩云</span> -->
			<el-dropdown>
			  <span class="el-dropdown-link">
			   <el-avatar :src="userPhoto" slot="header_image"></el-avatar>
			  </span>
			  <el-dropdown-menu slot="dropdown">
			    <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
			    <el-dropdown-item @click.native="Person">个人信息</el-dropdown-item>
			  </el-dropdown-menu>
			</el-dropdown>
		</div>
	</div>
</template>

<script>
	import {PersonManager} from "../request/personCenter.js"
	export default{
		data()
		{
			return{
				userPhoto:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
			}
		}
		,
		methods:{
			home()
			{
				this.$router.push('/MainPage');
			},
			exercis()
			{
				this.$router.push('/SpecialExercises');
			},
			curricul()
			{
				this.$router.push('/ExamRecords');
			},
			curricul1()
			{
				this.$router.push('/CourseCenter1');
			},
			curricul2()
			{
				this.$router.push('/FacialMeridian');
			},
			curricul3()
			{
				this.$router.push('/CourseCentermain');
			},
			
			ranking()
			{
				this.$router.push('/testcenter');
			},
			interview()
			{
				this.$router.push('/CreateTest');
			},
			Login()
			{
				this.$router.push('/');
			},
			logout()
			{
				this.$router.push('/Login');
				localStorage.removeItem("token");
				localStorage.removeItem("role");
				localStorage.removeItem("userPhoto");
			},
			Person()
			{
				this.$router.push("/PersonalCenter");
			},
            

			
		},
		created()
		{
			if(localStorage.getItem("userPhoto")){
				this.userPhoto=localStorage.getItem("userPhoto");
			}
		}
	}
</script>

<style scoped="scoped" >
	.main {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 3rem;
		margin-right: 3rem;
		min-width: 1200px;
	}

	.main_header {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.main_footer {
		height: 3.5rem;
		line-height: 3.5rem;
	}
	.el-menu-item{
		font-size: 17px;
		/* font-weight: 600; */
		color: #000000;
	}
	.el-menu--horizontal>.el-menu-item.is-active{
		border-bottom: 2px solid #00B8A6;
	    color: #00B8A6;
	}
	

	
</style>
